/*
 * @Autor: dc
 * @Date: 2022-03-18 17:46:44
 * @LastEditors: dc
 * @LastEditTime: 2022-03-21 16:09:07
 * @Description: 
 */
import React, { Component } from 'react';
// import axios from "axios"
// 订阅消息
import PubSub from 'pubsub-js'
class index extends Component {
    search = async () => {

        // 连续结构赋值+重命名
        const { keyWordElement: { value: keyWord } } = this
        // 调用订阅消息
        PubSub.publish('loadingSub', [true, 'loading...'])

        // fetcht 跟 xhr 请求类似.
        
        // 发送网络请求 - fetcht发送(原版)
        // fetch(`/students?keyWord=${keyWord}`).then(
        //     response =>{
        //         console.log('连接服务器成功了')
        //         return response.json()
        //     },
        //     error=>{
        //         console.log('连接服务器失败了',error)
        //         return new Promise(()=>{})
        //     }
        // ).then(
        //     response =>{
        //         console.log('获取数据成功',response)
        //     },
        //     error=>{
        //         console.log('获取数据失败',error)
        //     }
        // )
        // 发送网络请求 - fetcht发送(优化)
        try {
            const response = await fetch(`/students?keyWord=${keyWord}`);
            const data = await response.json();
            console.log(data)
            if (data.length <= 0) {
                PubSub.publish('loadingSub', [true, '未搜索到内容'])
            } else {
                PubSub.publish('loadingSub', [false, '请求成功'])
            }
            PubSub.publish('atguigu', data)
        } catch (error) {
            console.log(error)
            PubSub.publish('loadingSub', [true, error.message])
        }

        // 发送网络请求 - axios
        // axios.get('/students?keyWord=' + keyWord).then(
        //     response => {
        //         console.log('请求成功', response.data);
        //         const { data } = response;
        //         if (data.length <= 0) {
        //             PubSub.publish('loadingSub', [true, '未搜索到内容'])
        //         } else {
        //             PubSub.publish('loadingSub', [false, '请求成功'])
        //         }
        //         PubSub.publish('atguigu', data)
        //     },
        //     error => {
        //         PubSub.publish('loadingSub', [true, error.message])
        //         console.log('请求失败', error.message)
        //     }
        // )
    }
    render() {
        return (
            <div>
                <input ref={c => this.keyWordElement = c} placeholder='请输入搜索内容'></input>
                <button onClick={this.search}>搜索</button>
            </div>
        );
    }
}

export default (index);